<template>
	<div class="app-container">
		<div class="filter-container">
			<el-input v-model="listQuery.name" placeholder="标签名称" style="width: 200px;" class="filter-item" />
			<el-select style="width: 200px;" v-model="listQuery.tagType" placeholder="标签类型">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button style="margin-left: 5px;" type="primary"  @click="queryClick">查询</el-button>
			<el-button style="margin-left: 5px;" icon="el-icon-plus" type="primary"  @click="addClick('新增')">新增</el-button>
		</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="name" label="标签名">
			</el-table-column>
			<el-table-column prop="tagType" align="center" label="标签类型" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.tagType|tagfilters}}</span>

				</template>
			</el-table-column>
			<el-table-column prop="color" align="center" label="标签颜色" width="120">
			</el-table-column>
			<el-table-column prop="createBy" label="创建者" width="220">
			</el-table-column>
			<el-table-column prop="createDate" label="创建时间" width="200">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="88">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="delClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="tag-pagination">
			<pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
			            @pagination="loadList"/>
		</div>
		<!-- 新增 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="标签名称" :label-width="formLabelWidth">
					<el-input style="width: 200px;" v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签类型" :label-width="formLabelWidth">
					<el-select style="width: 200px;" v-model="form.tagType" placeholder="请选择类型">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标签颜色" :label-width="formLabelWidth">
					<el-color-picker v-model="form.color"></el-color-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveClick">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pagination from '@/components/Pagination/index.vue'
	import {
		save,
		update,
		list,
		queryById,
    del
	} from '@/api/tag.js'
	export default {
		data() {
			return {
				listQuery: {
					current: 1,
					size: 10,
					name:'',
					tagType:''
				},
				tableData: [],
				formLabelWidth: '70px',
				form: {
					name: '',
					tagType: '00',
					color: '#409EFF'
				},
				dialogFormVisible: false,
				dialogTitle: '新增',
				options: [{
					value: '00',
					label: '项目'
				}, {
					value: '01',
					label: '任务'
				}, {
					value: '02',
					label: '产品'
				}, {
					value: '04',
					label: '文档'
				}, {
					value: '05',
					label: '合同'
				}],
				total: 0
			}
		},
		filters: {
			tagfilters(val){
				switch(val) {
     				case '00':
					return '项目'
        			break ;
						case '01':
					return '任务'
        			break ;
						case '02':
					return '产品'
        			break ;
						case '04':
					return '文档'
        			break ;
						case '05':
					return '合同'
        			break ;
			}
		},
		},
		components:{pagination},
		created() {
			this.loadList()
		},
		methods: {
			handleClick(row) {
				console.log(row);
			},
			addClick(data) {
				this.form= {
					name: '',
					tagType: '00',
					color: '#409EFF'
				},
				this.dialogTitle = data
				this.dialogFormVisible = true
			},
			saveClick() {
				var _this = this
				if (_this.dialogTitle == '新增') {
					if(!this.form.name){
						this.$message.error('请输入标签名称');
						return;
					}
					save(_this.form).then(res => {
						console.log(res)
						_this.dialogFormVisible = false
						_this.loadList()
					})
				} else if (_this.dialogTitle == '修改') {
					if(!this.form.name){
						this.$message.error('请输入标签名称');
						return;
					}
					update(_this.form).then(res => {
						console.log(res)
						_this.dialogFormVisible = false
						_this.loadList()
					})
				}
			},
			loadList() {
				var _this = this
				list(_this.listQuery).then(res => {
					console.log(res)
					_this.tableData = res.data.records
					_this.total = res.data.total
				})
			},
			editClick(item){
				console.log(item)
				var _this = this
				queryById({id:item.tagId}).then(res=>{
					console.log(res)
					_this.form = res.data
					_this.dialogTitle = '修改'
					_this.dialogFormVisible = true
				})
			},
      delClick(item){
			  var _this = this
        this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del({ids:item.tagId}).then(res=>{
            _this.$message({
              type: 'success',
              message: '删除成功!'
            });
            _this.loadList()
          })
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
			queryClick(){
				this.listQuery.current = 1
				this.listQuery.size = 10,
				this.loadList()
			}
		},
	}
</script>

<style scoped>
	.tag-pagination {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
	}
</style>
